<template>
  <div class="index">
    <div>
      <w-header :index="data.item.articleTypeId"></w-header>
      <div class="body" style="margin-top: 0; padding: 1rem; box-sizing: border-box; align-items: flex-start;">
        <div class="article">
          <h1>{{ data.item.articleTitle }}</h1>
          <div class="h2"><router-link style="float: left;" :to="'article/'+data.type.articleTypeId+'/1'">{{data.type.articleTypeName}}</router-link> 来源：{{data.item.articleWorker}} 时间：{{data.item.articleTime}} 阅读次数：{{data.item.articleReadNum}}</div>
          <article v-html="data.item.articleContent">
          </article>
        </div>
      </div>
    </div>
    <w-footer></w-footer>
  </div>
</template>

<script setup>
import WHeader from '@/components/WHeader.vue';
import WFooter from '@/components/WFooter.vue';
import ArticleApi from '@/api/cms/ArticleApi';
import ArticleTypeApi from '@/api/cms/ArticleTypeApi';

import { reactive, onMounted, getCurrentInstance } from 'vue';

const proxy = getCurrentInstance().proxy;

const data = reactive({ type: {}, item: {} });

onMounted(() => {
  ArticleApi.get(proxy.$route.params.id).then(r => {
    data.item = r.data.data;
    if (!data.item?.articleId) {
      proxy.$router.push("/404");
      return;
    }
    
    data.item.articleReadNum++;
    ArticleApi.update({articleId:data.item.articleId,articleReadNum:data.item.articleReadNum});
    return ArticleTypeApi.get(data.item.articleTypeId);
  }).then(r => {
    data.type = r.data.data;
    if (!data.type?.articleTypeId) {
      proxy.$router.push("/404");
      return;
    }
    document.title = data.item.articleTitle + " - " + data.type.articleTypeName;
  });
});

</script>

<style>
.article {
  width: 1000px !important;
  height: auto !important;
  background-color: rgba(255, 255, 255, .8) !important;
  min-height: calc(100vh - 186px);
  box-shadow: 0 0 15px #ccc;
}
.article>h1 {
  font-size: 1.5rem;
  margin: 1rem 0;
  text-align: center;
}
.article>.h2 {
  font-size: 1rem;
  text-align: center;
  padding-bottom: .5rem;
  border-bottom: solid 1px #ccc;
  margin-bottom: .5rem;
}

.article>article {
  font-size: 1rem;
  line-height: 1.8;
}
.article>article p {
  text-indent: 2em;
}
.article>article img {
  display: block;
  margin: .5rem auto;
  max-width: 96%;
}
</style>